<template>
  <div>
    <div class="unit">
      <div class="unit-left">
        <el-input
          v-model="input1"
          placeholder="小区名称"
          class="uniform-width"
        ></el-input>
        <el-input
          v-model="input2"
          placeholder="单元名称"
          class="uniform-width"
        ></el-input>
        <div class="block">
          <el-date-picker
            v-model="value2"
            align="right"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
        <el-form :model="form" class="uniform-width">
          <el-select v-model="form.region" placeholder="选择状态">
            <el-option label="已建成" value="1"></el-option>
            <el-option label="未建成" value="2"></el-option>
          </el-select>
        </el-form>
      </div>
      <div class="unit-right">
        <el-button
          type="primary"
          icon="el-icon-search"
          class="small-btn"
          @click="fun"
        ></el-button>
        <el-button type="success" icon="el-icon-plus" @click="fun2">录入</el-button>
        <el-button type="primary" icon="el-icon-refresh-right" @click="fun1">重置</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%; margin-top: 30px; text-align: center"
    >
      <el-table-column
        fixed
        prop="communityname"
        label="小区名称"
      ></el-table-column>
      <el-table-column prop="unitname" label="单元名称"> </el-table-column>
      <el-table-column prop="unitnum" label="栋数"> </el-table-column>
      <el-table-column prop="createtime" label="建设时间">
        <template slot-scope="scope">
          {{ dayjs(scope.row.createtime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column prop="unitstatus" label="状态">
        <template slot-scope="scope">
          {{ scope.row.unitstatus === 1 ? "已建成" : "未建成" }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)" >详情</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">归档</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=" current"
        :page-sizes="sizes"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  data() {
    return {
       
        token:"",
        size:10,
        sizes:[10,20,30],
         current:1, //当前页数
      total:0,  //总条数
      input1: "",
      input2: "",
      form: {
        region: "",
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },

      value2: "",
    tableData:[],
    };
  },
   created() {
    this.getList();
    this.token=sessionStorage.getItem("token")

  },
  methods:{
     handleEdit(index, row) {
        console.log(index, row);
        sessionStorage.setItem("id",row.id)
          this.$router.push('/house/datail');
       
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
    fun2(){
         this.$router.push('/house/add');
    },
    fun1(){
        this.input1=""
        this.input2=""
        this.value2=""
        this.form.region=""
         this.getList();
    },
    fun(){
        this.$axios
        .get(`/house/searchList?pageNum=${this.size}&currPage=${this.current}&communityname=${this.input1}&unitname=${this.input2}&createDt=${this.value2}&value=${this.form.region}&token=${this.token}`
         
        )
        .then((res) => {
          this.tableData = res.data.data;
          console.log(res);
           this.total=res.data.total
          
           
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
         this.size = val;
      this.getList();
        
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
         this.current = val;  // 更新当前页码
    this.getList();  
      },
     dayjs(date) {
    return dayjs(date);
  },
     getList() {
      this.$axios
        .get(`/house/gethouseList?pageNum=${this.size}&currPage=${this.current-1}`
         
        )
        .then((res) => {
          this.tableData = res.data.data;
          console.log(res);
           this.total=res.data.total
           
           
          
           
        })
        .catch((err) => {
          console.log(err);
        });
    },
  }
};
</script>

<style>
.unit {
  width: 100%;
  height: 2.25rem;
  display: flex;
  justify-content: space-between;
}
.unit-left {
  width: 70%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.unit-right {
  width: 20%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.unit-right .el-button {
  width: 40%; /* 增大另外两个按钮的宽度 */
}
.unit-right .small-btn {
  width: 20%; /* 搜索按钮宽度更小 */
}

.uniform-width {
  width: 24%; /* 四个元素平均分配宽度，可根据需要调整 */
  box-sizing: border-box; /* 确保padding不影响总宽度 */
}
.uniform-width .el-input,
.uniform-width .el-select {
  width: 100%;
}
</style>